<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form :model="form" ref="refForm" :rules="rules" label-position="top">
          <el-form-item label="账户名：" prop="username">
            <el-input v-model="form.username"></el-input>
            <el-tip>3-16个字符，支持字母和数字、_。只能字母开头</el-tip>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input type="password" v-model="form.password" autocomplete="off" ></el-input>
            <el-tip>密码由8-20位字母和数字组成。</el-tip>
          </el-form-item>
          <el-form-item label="部门岗位设置" prop="department">
            <el-cascader
              :options="options"
              @focus="doAction({action:'getCascaders',type:'get'})"
              v-model="form.department"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <el-row>
          <el-button type="primary" :loading="loading" @click="doSave({action: 'saveForm', form: 'refForm'})">保存</el-button>
          <el-button @click="resetForm('refForm')" :disabled="loading">复原</el-button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {form, factory} from '@/build';
  import {authDepartmentAllGetApi, authCreateAccountApi,authDepartmentGetByIdApi} from '@/services/api/permission';

  export default {
    name: "create-account",
    mixins: [form],

    data() {
      return {
        form: {
          username: undefined,
          password: undefined,
          department: undefined,
          remark: undefined,
        },
        options: [],
        rules: {
          username: factory.getRule('adminUsername'),
          password: factory.getRule('password'),
          department: [
            { required: true, message: '部门岗位不能为空', trigger: 'change' }
          ]
        }
      }
    },
    methods:{
    },

    mounted() {
      this.bindGet(authDepartmentAllGetApi, 'options', {
        type: 'get',
        action:'getCascaders',
        format: (list) => {
          return _.map(list, data => {
            return {
              value: data.departmentId,
              label: data.name,
              children: _.map(data.jobList, (childrenInfo) => {
                return {
                  value: childrenInfo.jobId,
                  label: childrenInfo.name
                };
              })
            }
          })
        }
      });
      this.bindSave(authCreateAccountApi, 'saveForm', 'form', {
        afterSuccess: ()=>{
          this.resetForm('refForm');
          this.$router.push({
            name: 'permission-user-add',
            replace: true,
          })
        }
      });

      this.getAll();
    },
  }
</script>

<style scoped>

</style>
